import React, { useState, useEffect } from "react";
import { useLanguageOptions } from "@/hooks/useLanguageOptions";
import { useTranslation } from "react-i18next";
import { useChatMessageAlignment } from "@/hooks/useChatMessageAlignment";
import { Select, Button } from "antd";
import Left from "@/media/model/left.png";
import Between from "@/media/model/between.png";
import "../index.css";
const App = ({ handleCancel }) => {
  const { t } = useTranslation();
  const {
    currentLanguage,
    supportedLanguages,
    getLanguageName,
    changeLanguage,
  } = useLanguageOptions();
  const { msgDirection, setMsgDirection } = useChatMessageAlignment();
  const [langValue, setLangValue] = useState();
  const [languageList, setLanguageList] = useState([]);
  const changeDirection = (val) => {
    setMsgDirection(val);
  };
  const changeLang = (value) => {
    setLangValue(value);
  };

  // 重置按钮的处理函数
  const handleReset = async () => {
    setLangValue(currentLanguage);
    setMsgDirection("left"); // 重置为左对齐
  };

  const handleSave = () => {
    changeLanguage(langValue);
  };

  useEffect(() => {
    const list = supportedLanguages.map((ele) => {
      return {
        value: ele,
        label: getLanguageName(ele),
      };
    });
    setLanguageList(list);
    setLangValue(getLanguageName(currentLanguage || "zh"));
  }, [currentLanguage]);

  return (
    <>
      <div className="content-top h-[420px]">
        {/* <div className="flex flex-col text-[14px] text-theme-text-default">
          <p className="font-semibold mb-[12px]">主题</p>
          <Select
            className="w-full text-number-input"
            defaultValue={3}
            onChange={onChange}
            options={[
              { value: "深色", label: "深色" },
              { value: "浅色", label: "浅色" },
            ]}
          />
        </div> */}

        <div className="flex flex-col text-[14px]  mb-[24px]">
          <p className="font-semibold mb-[12px]">语言</p>
          <Select
            className="w-full text-number-input"
            defaultValue={currentLanguage || "zh"}
            value={langValue}
            onChange={(value) => {
              changeLang(value);
            }}
            options={languageList}
          />
        </div>

        <div className="flex flex-col text-[14px]">
          <p className="font-semibold mb-[12px]">消息对齐方式</p>
          <div className="flex items-center">
            <div
              className={`flex items-center justify-center px-[18px] py-[12px] rounded-[8px] mr-[24px] bg-theme-modal-alignment cursor-pointer ${msgDirection == "left" ? "active" : ""}`}
              onClick={() => {
                changeDirection("left");
              }}
            >
              <img src={Between} alt="Between" className="w-[186px] h-[58px]" />
            </div>
            <div
              className={`flex items-center justify-center px-[18px] py-[12px] rounded-[8px] bg-theme-modal-alignment cursor-pointer cursor-pointer ${msgDirection == "left_right" ? "active" : ""}`}
              onClick={() => {
                changeDirection("left_right");
              }}
            >
              <img src={Left} alt="Left" className="w-[186px] h-[58px]" />
            </div>
          </div>
        </div>
      </div>
      <div className="content-bottom flex items-center justify-end">
        <Button color="default" variant="link" onClick={handleCancel}>
          取消
        </Button>
        <Button type="link" onClick={handleReset}>
          重置
        </Button>
        <Button color="primary" variant="link" onClick={handleSave}>
          保存
        </Button>
      </div>
    </>
  );
};
export default App;
